<style>
  .list-item {
    width: 140px;
    height: 140px;
    border: grey dashed 1px;
    margin: 5px;
    padding: 10px;
    background-color: rgba(128, 128, 128, 0.5);
  }

  .list-item:hover {
    background-color: grey;
  }
</style>

<div>
  @for (item of items;track $index) {
    <div class="list-item">
      <div>
        <p>id: <span>{{ item.id }}</span></p>
        <p>name: <span>{{ item.name }}</span></p>
      </div>
      <div>
        <button (click)="lookDetails(item)">详情</button>
      </div>
    </div>

    @defer (on viewport) {
      <app-comment-list-item/>
    } @placeholder {
      <p>aaaaaaaa</p>
    }
  } @empty {
    <p>空数组</p>
  }
</div>
